<script lang="ts" setup>
import { onMounted, onUnmounted, reactive } from 'vue'
import { dbus } from '@/dbus/dbus.ts'
import { SelectOption } from 'naive-ui'
import { ComponentV2rayServer, new_component_v2ray_server } from '@/models/components/v2ray/v2ray_server.ts'
import { invoke_proxy } from '@/functions/invoke.ts'
import { BackendResponse } from '@/runtime/response.ts'
import { BACKEND_CODE_OK } from '@/runtime/code.ts'

const emit = defineEmits(['saved'])
const state = reactive<{ show: boolean; server: ComponentV2rayServer; saving: boolean }>({ show: false, server: new_component_v2ray_server(), saving: false })
const security_options: SelectOption[] = [
    { label: 'none', value: 'none' },
    { label: 'auto', value: 'auto' },
    { label: 'AES-128-GCM', value: 'aes-128-gcm' },
    { label: 'CHACHA20-POLY1305', value: 'chacha20-poly1305' },
]
const network_options: SelectOption[] = [{ label: 'Web Socket', value: 'WebSocket' }]

onMounted(async () => {
    dbus.on('component:v2ray:edit-server-config', show)
})

onUnmounted(async () => {
    dbus.off('component:v2ray:edit-server-config', show)
})

async function show(data: unknown): Promise<void> {
    if (data) {
        state.server = data as ComponentV2rayServer
    }

    state.show = true
}

async function save(used: boolean): Promise<void> {
    state.server.used = used
    console.log(state.server)

    state.saving = true
    const response = await invoke_proxy<BackendResponse<any>>('invoke_component_v2ray_save_server', { server: state.server })
    state.saving = false
    if (BACKEND_CODE_OK !== response.code) {
        window.Message.error(response.message)

        return
    }

    window.Message.success('保存成功')
    state.show = false
    emit('saved')
}
</script>

<template>
    <n-modal v-model:show="state.show" :mask-closable="false" class="modal" transform-origin="center">
        <n-card closable @close="state.show = false">
            <n-space :wrap="false" :wrap-item="false" vertical>
                <n-space :wrap="false" :wrap-item="false" align="center">
                    <div class="max-flex-width">
                        <n-input-group>
                            <n-input-group-label size="small">标签(唯一)</n-input-group-label>
                            <n-input v-model:value="state.server.tag" placeholder="请输入标签，必填且唯一" size="small" spellcheck="false"></n-input>
                        </n-input-group>
                    </div>
                    <div style="width: 320px">
                        <n-input-group>
                            <n-input-group-label size="small">服务器地址</n-input-group-label>
                            <n-input v-model:value="state.server.address" placeholder="服务器IP或域名" size="small" spellcheck="false"></n-input>
                        </n-input-group>
                    </div>
                    <div style="width: 200px">
                        <n-input-group>
                            <n-input-group-label size="small">服务器端口</n-input-group-label>
                            <n-input-number v-model:value="state.server.port" max="65535" min="1" placeholder="端口" size="small"></n-input-number>
                        </n-input-group>
                    </div>
                </n-space>
                <n-space :wrap="false" :wrap-item="false" align="center">
                    <div class="max-flex-width">
                        <n-input-group>
                            <n-input-group-label size="small">用户ID</n-input-group-label>
                            <n-input v-model:value="state.server.user_id" placeholder="请输入验证的用户ID" size="small" spellcheck="false"></n-input>
                        </n-input-group>
                    </div>
                    <div style="width: 140px">
                        <n-input-group>
                            <n-input-group-label size="small">AlertId</n-input-group-label>
                            <n-input-number v-model:value="state.server.alter_id" min="0" placeholder="Alter Id" size="small"></n-input-number>
                        </n-input-group>
                    </div>
                    <div style="width: 140px">
                        <n-input-group>
                            <n-input-group-label size="small">Level</n-input-group-label>
                            <n-input-number v-model:value="state.server.level" min="0" placeholder="Level" size="small"></n-input-number>
                        </n-input-group>
                    </div>
                    <div style="width: 260px">
                        <n-input-group>
                            <n-input-group-label size="small">Security</n-input-group-label>
                            <n-select v-model:value="state.server.security" :options="security_options" size="small"></n-select>
                        </n-input-group>
                    </div>
                </n-space>
                <n-space :wrap="false" :wrap-item="false" align="center">
                    <div class="max-flex-width">
                        <n-input-group>
                            <n-input-group-label size="small">网络连接方式</n-input-group-label>
                            <n-select v-model:value="state.server.network" :options="network_options" size="small"></n-select>
                        </n-input-group>
                    </div>
                </n-space>
                <template v-if="'WebSocket' === state.server.network">
                    <n-space :wrap="false" :wrap-item="false" align="center">
                        <div class="max-flex-width">
                            <n-input-group>
                                <n-input-group-label size="small">Web Socket访问路径</n-input-group-label>
                                <n-input v-model:value="state.server.websocket_setting.path" placeholder="请输入WS协议的访问路径" size="small" spellcheck="false"></n-input>
                            </n-input-group>
                        </div>
                        <div style="width: 600px">
                            <n-input-group>
                                <n-input-group-label size="small">自定义请求头(JSON)</n-input-group-label>
                                <n-input v-model:value="state.server.websocket_setting.headers_json_string" placeholder="请以JSON格式输入HTTP请求头" size="small" spellcheck="false"></n-input>
                            </n-input-group>
                        </div>
                    </n-space>
                </template>
            </n-space>
            <n-space :wrap="false" :wrap-item="false" align="center" class="buttons" justify="center">
                <n-button size="small" type="error" @click="state.show = false">取消</n-button>
                <n-button :disabled="state.saving" size="small" type="info" @click="save(false)">保存</n-button>
                <n-button :disabled="state.saving" size="small" type="info" @click="save(true)">保存并使用</n-button>
            </n-space>
        </n-card>
    </n-modal>
</template>

<style lang="scss" scoped>
.modal {
    width: 80vw;
    height: 80vh;
}

.buttons {
    margin-top: 60px;
}
</style>
